<template>
  <div class="modalPageBox" >
    <a-pagination v-model:current="current" :pageSize="pagesize" @change="CurrentChange" :total="total" size="small" :showSizeChanger="false">
      <template #itemRender="{ type, originalElement }">
        <div class="prevBtn" v-if="type === 'prev'">上一页</div>
        <div class="nextBtn" v-else-if="type === 'next'">下一页</div>
      <component :is="originalElement" v-else></component>
    </template>
    </a-pagination>
  </div>

</template>
<script setup>
import { defineProps, onMounted, ref } from "vue"
const current = ref(1)

const emit = defineEmits(["close", "pageChange"])
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  pagesize: {
    type: Number,
    default: 10
  }
})

const CurrentChange = (e) => {
  emit("pageChange", e)
}
const resetPage = () => {
  current.value = 1
}
const close = () => {
  emit("close")
}
onMounted(() => {})
defineExpose({ resetPage })
</script>
<style>
  .modalPageBox .ant-pagination .ant-pagination-item-active{
    color:#EEF9FF;
    background: linear-gradient(180deg, rgba(77, 222, 207, 0.15) 0%, rgba(77, 222, 207, 0.5) 100%);
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(77, 222, 207, 0.15) 0%, rgba(77, 222, 207, 0.5) 100%);
    font-weight: 400;
  }
  .modalPageBox .ant-pagination .ant-pagination-item-active a{
    color:#EEF9FF;
    font-size: 12px;
  }
  .modalPageBox .ant-pagination .ant-pagination-item a{
    color:#EEF9FF;
    font-size: 12px;
  }
  .modalPageBox .ant-pagination.ant-pagination-mini .ant-pagination-item{
    margin: 0 2px;
  }
  .modalPageBox .ant-pagination .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis{
    color:#EEF9FF;
  }
  .modalPageBox .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis{
    color:#EEF9FF;
  }
  .modalPageBox .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon{
    color:#EEF9FF;
  }
  .modalPageBox .ant-pagination .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon{
    color:#EEF9FF;
  }
  .modalPageBox .ant-pagination.ant-pagination-mini .ant-pagination-item:not(.ant-pagination-item-active){
    background: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);


  }
</style>
<style lang="less" scoped>
  .modalPageBox{
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    .nextBtn,.prevBtn{
      margin:0 5px;
      color: #EEF9FF;
      width: 59;
      font-size: 10px;
      border-width: 1px;
      padding: 0 10px;
      background: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);
      border: 1px solid;
      border-image-source: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);
    }
  }

</style>
